<template>
  <div class="shop-setting">
    <mt-header :title="title">
      <router-link to="/shop" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <time-picker @selectTexted="selectitme" @popstatus="popstatus" :popupVisibleTime="popupVisibleTime"></time-picker>
    <div class="wrapper" ref="askWrapper">
      <div class="setting-list">
        <mt-field label="店铺名称" placeholder="请输入名称" v-model="name"></mt-field>
        <mt-field label="联系电话" type="num" placeholder="请输入电话" v-model="phone"></mt-field>
        <mt-field label="人均消费" type="num" placeholder="请输入人均消费" v-model="shop_rj"></mt-field>
        <div class="mj">
          <p class="title-p">营业时间</p>
          <div class="mj-input" @click="togglePopup">
            <input type="text" placeholder="请选择营业时间" readOnly :value="time" >
          </div>
        </div>
        <div class="mj">
          <p class="title-p">是否营业</p>
          <div class="mj-input">
            <mt-radio
              v-model="radiovalue"
              :options="options">
            </mt-radio>
          </div>
        </div>
        <div class="mj">
          <p class="title-p">营业地址</p>
          <div class="mj-input">
            <input type="text" placeholder="请选择营业地址" readOnly :value="address" @click="addAddress">
          </div>
        </div>
        <mt-field label="店铺简介" placeholder="店铺简介" type="textarea" rows="2" v-model="introduction"></mt-field>
        <upload-img text="店铺主图" @imgurl="getImgurl" :imgUrl="imgUrl"></upload-img>
        <p class="zhu-title">店铺图片&nbsp;<span class="fu-title">(多图轮播)</span></p>
        <upload-imgs @imgurls="getImgurls"></upload-imgs>
        <mt-button class="btn-tj" type="primary" @click="tj($event)">提交</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import uploadImg from 'components/common/uploadImg.vue'
import uploadImgs from 'components/common/uploadImgs.vue'
import timePicker from 'components/common/timePicker.vue'
import axios from 'axios'
import BScroll from 'better-scroll'
import {Toast} from 'mint-ui'
import {axiosNet} from 'common/js/nethelp.js'
export default {
  data() {
      return {
        name:'',
        phone:'',
        introduction:'',
        title:'店铺设置',
        imgUrl:'',
        image1:'',
        image2:'',
        image3:'',
        image4:'',
        time:'',
        address :'',
        lng:"",
        lat:"",
        shop_rj:"",
        shopInfo:{},
        searchValue:'',
        couponid:0,
        condition:'',
        fee:'',
        startdate:'',
        enddate:'',
        popupVisibleTime:false,
        options:[
          {
            label: '营业中',
            value: 'y'
          },
          {
            label: '休息中',
            value: 'n'
          }
        ],
        radiovalue:'y'
      }
    },
    mounted() {
      this.initScroll();
      //console.log(this.$route.path)
      //得到地址参数
      this.routeP()
    },
    methods: {
      routeP(){
        let query = this.$route.query
        console.log(this.$route.query)
        if(query.addr){
          let str = query.addr
          let lng = str.split('-')[0]
          let lat = str.split('-')[1]
          this.lng = lng
          this.lat = lat
          let address = str.split('-')[2]
          this.address = address
          let shopinfos = query.shopinfo
          this.name = shopinfos.name
          this.phone = shopinfos.phone
          this.time = shopinfos.time
          this.introduction = shopinfos.introduction
          this.imgUrl = shopinfos.imgUrl
          this.image1 = shopinfos.image1
          this.image2 = shopinfos.image2
          this.image3 = shopinfos.image3
          this.image4 = shopinfos.image4
          this.shop_rj = shopinfos.shop_rj
          this.radiovalue = shopinfos.radiovalue
        }else{
          this.getshopinfo();
        }
        
      },
      getshopinfo(){
        let token = localStorage.getItem("access_token");
        let params = {"access_token": token}
        axiosNet("/Shop/get_shop_info",params,(data) => {
          this.name = data.data.name
          this.phone = data.data.contact_phone
          this.time = data.data.shop_time
          this.address = data.data.address
          this.lng = data.data.longitude
          this.lat = data.data.latitude
          this.introduction = data.data.description
          this.imgUrl = data.data.thumb
          this.shop_rj = data.data.shop_rj
          this.image1 = data.data.image1
          this.image2 = data.data.image2
          this.image3 = data.data.image3
          this.image4 = data.data.image4
          this.radiovalue = data.data.open_status
        })
      },
      initScroll(){
        if(this.contentScroll){
          this.contentScroll.refresh();
        }else{
          this.contentScroll = new BScroll(this.$refs.askWrapper,{
            probeType:3,
            click:true
          });
        }
        this.contentScroll.on('scroll',(pos)=>{
          this.scrollY = Math.abs(Math.round(pos.y));
          
          //console.log("====scrollY" + this.scrollY)
        });
        this.contentScroll.on('touchend', (pos) => {
          // 下拉动作
          if (pos.y > 50) {
            //console.log('xiala')
          }
        });
        this.contentScroll.on('scrollEnd', () => {
          // 滚动到底部
        
        })
      },
      addAddress(){
        let shopinfos = {}
        shopinfos.name = this.name
        shopinfos.phone = this.phone
        shopinfos.time = this.time
        shopinfos.address = this.address 
        shopinfos.introduction = this.introduction
        shopinfos.imgUrl = this.imgUrl
        shopinfos.image1 = this.image1 
        shopinfos.image2 = this.image2
        shopinfos.image3 = this.image3
        shopinfos.image4 = this.image4
        shopinfos.shop_rj = this.shop_rj
        shopinfos.radiovalue = this.radiovalue
        console.log(this.introduction)
        this.$router.push({path: '/address/', query: {shopinfo: shopinfos}})
      },
      getImgurl(msg){
        this.imgUrl = msg
      },
      getImgurls(msg){
        let type = msg.split("#")[1];
        if(type == "one"){
          this.image1 = msg.split("#")[0]
        }
        if(type == "two"){
          this.image2 = msg.split("#")[0]
        }
        if(type == "three"){
          this.image3 = msg.split("#")[0]
        }
        if(type == "four"){
          this.image4 = msg.split("#")[0]
        }

      },
      selectitme(msg){
        this.time = msg
      },
      togglePopup() {
          this.popupVisibleTime = !this.popupVisibleTime;
      },
      popstatus(msg){
        this.popupVisibleTime = msg
      },
      tj(event){
        console.log(event._constructed)
        // if(event._constructed){
        //   return;
        // }
        let token = localStorage.getItem("access_token");
        let params = {"access_token": token,
          "name":this.name,
          "contact_phone":this.phone,
          "shop_time":this.time,
          "description":this.introduction,
          "address": this.address ,
          "thumb": this.imgUrl,
          "longitude":this.lng,
          "latitude" : this.lat,
          "shop_rj" :this.shop_rj,
          "image1":this.image1,
          "image2":this.image2,
          "image3":this.image3,
          "image4":this.image4,
          "open_status":this.radiovalue
          }
        axiosNet("/Shop/update_info",params,(data) => {
          this.$router.push({path: '/shop'})
        })
      }
    },
    components:{
      uploadImg,
      uploadImgs,
      timePicker
    }
}
</script>

<style lang="stylus">
.shop-setting
  background:#f2f2f2
  height:100%
  width:100%
  position:absolute
  top:0
  left:0
  z-index:10
  .mint-header
    color:rgb(104, 104, 104)
    background:#26a2ff
    border-bottom:1px solid #ccc
    font-size:18px
    letter-spacing:2px
    box-shadow: 1px 3px 5px #eee
    z-index:11
    color:#fff
    height 44px
    label,span
      color:#fff
  .wrapper
    width:100%
    height:80%
    .setting-list
      .zhu-title
        padding:10px
        background:#fff
        .fu-title
          font-size:12px
          color:#666
      .mj
        display: flex
        background: #fff
        border-bottom: 1px solid #f1f1f1
        .title-p
          flex: 0 0 105px
          line-height 40px
          padding-left: 10px
          color: #111
        .mj-input
          flex: 1
          .mint-radiolist
            display flex
            .mint-cell
              min-height 40px
              .mint-cell-wrapper
                padding 0
                .mint-radiolist-label
                  padding 0
                  .mint-radio-label
                    margin-right 10px
            .mint-radiolist-title
              display none
          p
            line-height:40px
            color:#f00
            flex: 0 0 50px
            text-align: center
          input
            min-height: 40px
            height: 40px
            border-bottom: none
            width:90%
      .btn-tj
        margin:20px 5%
        width:90%
      .mint-field 
        border-bottom:1px solid #f1f1f1

</style>